<template>
    <div class="app-container">
        <el-row>
            <el-col :span="20">
                <el-form :inline="true" :model="listQuery" class="demo-form-inline">
                    <el-form-item label="数据库类型">
                        <el-select id="" v-model="listQuery.db_type" @change="getDbNameList(listQuery.db_type)"
                            placeholder="数据库类型" clearable filterable default-first-option>
                            <el-option v-for="item in db_type_list" :key="item.db_type" :label="item.db_type"
                                :value="item.db_type" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据库名">
                        <el-select id="" v-model="listQuery.db_name" placeholder="数据库名" clearable filterable
                            default-first-option>
                            <el-option v-for="item in db_name_list" :key="item.db_name" :label="item.db_name"
                                :value="item.db_name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务器地址">
                        <el-select id="" v-model="listQuery.db_server" placeholder="服务器地址" clearable filterable
                            default-first-option>
                            <el-option v-for="item in db_server_list" :key="item.db_server" :label="item.db_server"
                                :value="item.db_server" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple-light">
                    <el-button type="text" @click="executeQuery()">查询</el-button>
                </div>
            </el-col>
            <el-col :span="2">
                <div>
                    <el-button type="text" @click="dialogFormVisible = true">渲染模板SQL</el-button>
                </div>
            </el-col>
        </el-row>
        <SqlEditor ref="editor" :sql="listQuery.sql" />


        <el-dialog title="模板参数" :visible.sync="dialogVisible">
            <JsonEditor ref="jsonEditor"></JsonEditor>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleJsonCode">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import SqlEditor from '@/components/SqlEditor'
import JsonEditor from '@/components/JsonEditor'
import { getDbTypeInfo, getDbNameInfo } from '@/api/metadata'
import { queryData,renderSql } from '@/api/sqlquery'

export default {
    name: 'SqlQuery',
    components: {
        SqlEditor, JsonEditor
    },
    data() {
        return {
            dialogFormVisible: false,
            dialogVisible: this.dialogFormVisible,
            sql: '',
            db_type_list: [],
            db_name_list: [],
            db_server_list:[],
            listQuery: {
                db_name: '',
                db_type: '',
                db_server: '',
                sql:''
            },
            jsonStr: ''
            
        }
    },
    created() {
        this.getDbTypeList()
    },
    computed: {
        dialogVisible() {
            this.dialogFormVisible
        }
    },
    methods: {
        getDbTypeList() {
            getDbTypeInfo().then(response => {
                this.db_type_list = response.data
            })
        },
        getDbNameList(db_type) {
            let params = {
                db_type: db_type
            }
            this.listQuery.db_name = null
            getDbNameInfo(params).then(response => {
                this.db_name_list = response.data
            })
        },
        executeQuery() {
            this.listQuery.sql = this.$refs.editor.sqlEditor.getValue()
            // let data = {...this.listQuery}
            let data = {
                sql: this.listQuery.sql,
                db_name: this.listQuery.db_name,
                db_type: this.listQuery.db_type,
                db_server: this.listQuery.db_server
            }
            queryData(data).then(response => {
                // console.log(response.data)
                alert(response.msg)
            })
        },
        renderSqlTemplate() {
            while (true) {
                if (this.dialogFormVisible === false) {
                    params = this.$refs.jsonEditor.jsonEditor.getValue()
                    this.listQuery.sql = this.$refs.editor.sqlEditor.getValue()
                    let data = {
                        "sql": this.listQuery.sql,
                        "params": {
                            "msg": "hello world"
                        }
                    }
                    renderSql(data).then(response => {
                        console.log(response.data)
                        console.log(params)

                    })
                    break;
                }
            }
        },
        handleJsonCode() {
            this.dialogFormVisible = false
            console.log(this.$refs.jsonEditor.jsonEditor.getValue())
        }
    }

}
</script>

<style scoped>

</style>